import styled from "@emotion/styled"
import dayjs from "dayjs"
import { formatCurrency } from "@/utils/format"
import Svg from "@/components/base/Svg"
import { memo } from "react"

// 定义历史记录项的类型
interface HistoryItem {
    bet: number
    position: string
    bonus: number
    date?: string // 可选日期，如果不提供则使用当前日期
}

// 模拟数据
const historyList: HistoryItem[] = [
    {
        bet: 200,
        position: "2nd",
        bonus: 25000.0,
    },
]

// 样式组件
const ContainerDiv = styled.div`
    width: 100%;
    height: 90vh;
    position: relative;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    background-color: #f7f8fa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
`

const HeaderContainer = styled.div`
    width: 100%;
    height: 64rem;
    padding: 0 16rem;
    border-bottom: 1rem solid #e5e6eb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d2129;
    font-size: 16rem;
    font-weight: 700;
`

const DetailClose = styled.span`
    width: 32rem;
    height: 32rem;
    position: absolute;
    top: 50%;
    right: 16rem;
    background-color: #fff;
    transform: translateY(-50%);
    border: 1rem solid #6b7785;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rem;
    cursor: pointer;
`

const ContentContainer = styled.div`
    padding: 16rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
`

const ContentUl = styled.ul`
    color: #272e3b;
    font-size: 14rem;
    font-weight: 500;
    padding-inline-start: 0;
    border-radius: 8rem;
    overflow: hidden;
`

const HistoryItem = styled.li`
    list-style: none;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 10rem 12rem;
    margin-bottom: 8rem;
    border-radius: 8rem;

    &:last-child {
        margin-bottom: 0;
    }
`

const DateDisplay = styled.p`
    width: 100%;
    border-bottom: 1rem solid #f2f3f5;
    line-height: 16rem;
    margin: 0;
    padding: 0 0 8rem 0;
`

const HistoryContent = styled.div`
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 56rem;
`

const HistoryHeader = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
`

const HistoryData = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
`

const HeaderCell = styled.span`
    color: #1d2129;
    font-weight: 500;
    font-size: 12rem;
    flex: 1;
    text-align: center;
    line-height: 16rem;
`

const DataCell = styled.span`
    color: #1d2129;
    font-weight: 700;
    font-size: 12rem;
    line-height: 24rem;
    flex: 1;
    text-align: center;
`

// 历史记录项组件
const HistoryListItem = memo(({ item }: { item: HistoryItem }) => {
    const displayDate = item.date || dayjs().format("YYYY/MM/DD")

    return (
        <HistoryItem>
            <DateDisplay>{displayDate}</DateDisplay>
            <HistoryContent>
                <HistoryHeader>
                    <HeaderCell>Bet</HeaderCell>
                    <HeaderCell>Position</HeaderCell>
                    <HeaderCell>Bonus</HeaderCell>
                </HistoryHeader>
                <HistoryData>
                    <DataCell>{formatCurrency(item.bet)}</DataCell>
                    <DataCell>{item.position}</DataCell>
                    <DataCell>{formatCurrency(item.bonus)}</DataCell>
                </HistoryData>
            </HistoryContent>
        </HistoryItem>
    )
})

// 组件属性类型
interface BonusHistoryProps {
    close: () => void
}

// 主组件
const BonusHistory = ({ close }: BonusHistoryProps) => {
    return (
        <ContainerDiv>
            <HeaderContainer>
                <span>My Bonus History</span>
                <DetailClose onClick={close}>
                    <Svg src="pages/Walfare/svg/cancel.svg" />
                </DetailClose>
            </HeaderContainer>
            <ContentContainer>
                <ContentUl>
                    {historyList.length > 0 ? (
                        historyList.map((historyInfo, index) => (
                            <HistoryListItem
                                key={index}
                                item={historyInfo}
                            />
                        ))
                    ) : (
                        <HistoryItem>No bonus history found</HistoryItem>
                    )}
                </ContentUl>
            </ContentContainer>
        </ContainerDiv>
    )
}

export default BonusHistory
